<template>
  <div class="filter-wrapper">
    <el-button type="primary" @click="addProduct">新增菜品</el-button>
  </div>
  <el-card>
    <el-table
      ref="singleTable"
      :data="tableData"
      highlight-current-row
      @current-change="handleCurrentChange"
      style="width: 100%"
    >
      <el-table-column type="index" width="50"> </el-table-column>
      <el-table-column property="name" label="菜品名称"> </el-table-column>
      <el-table-column label="图片" width="180">
        <template #default="scope">
          <img
            :src="scope.row.image[0].url"
            style="width: 90px; height: 40px; object-fit: cover"
            alt=""
          />
        </template>
      </el-table-column>
      <el-table-column property="unitprice" label="售价"> </el-table-column>
      <el-table-column property="onsale" label="售卖状态"> </el-table-column>
      <el-table-column
        property="created_time"
        label="添加时间"
        :formatter="formatTime"
        width="140"
      >
      </el-table-column>
      <el-table-column fixed="right" label="操作" width="140">
        <template #default="scope">
          <el-button text size="small" @click="handleEdit(scope.row)"
            >编辑</el-button
          >
          <el-button
            text
            type="warning"
            size="small"
            @click="handleDel(scope.row)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
  </el-card>
</template>

<script setup>
import { ref, onMounted, computed } from "vue";
import { productList, delProduct } from "@/network/product";
import dayjs from "dayjs";
import { useRouter } from "vue-router";

const router = useRouter();

const currentRow = ref(null);
const tableData = ref([]);

const handleDel = (p) => {
  delProduct({ id: p.id }).then((res) => {
    loadProducts();
  });
};

onMounted(() => {
  loadProducts();
});
const formatTime = (row, col, cellValue) => {
  // return col;
  return dayjs(cellValue).format("YYYY-MM-DD HH:ss");
};
const loadProducts = () => {
  productList({}).then((list) => {
    tableData.value = list.data;
  });
};

const addProduct = () => {
  router.push({ path: "/product/add" });
};

const handleEdit = (row) => {
  router.push({ path: "/product/edit", query: { id: row.id } });
};

const handleDelete = (index, row) => {};

const setCurrent = (row) => {
  // singleTable.setCurrentRow(row);
};

const handleCurrentChange = (val) => {
  currentRow.value = val;
};
</script>

<style scoped>
.filter-wrapper {
  padding-bottom: 20px;
  box-sizing: border-box;
}
.el-header,
.el-footer {
  background-color: #b3c0d1;
  color: #333;
  text-align: center;
  line-height: 60px;
}

.el-aside {
  background-color: #545c64;
  color: #333;
  text-align: center;
  line-height: 200px;
}

.el-main {
  background-color: #e9eef3;
  color: #333;
}

.el-container:nth-child(5) .el-aside,
.el-container:nth-child(6) .el-aside {
  line-height: 260px;
}

.el-container:nth-child(7) .el-aside {
  line-height: 320px;
}

.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 200px;
  min-height: 400px;
}
</style>